<template>
	<view>
		<hx-navbar ref="hxnb" :config="config" />
		<view style="padding:30rpx ;">
			<view style="color:#ffffff;font-size: 35rpx;font-weight: 600;">关键词</view>
			<view class="dh-input"
				style="border-radius: 30rpx;background-color: #484a56;border: 1rpx solid white;display: flex;align-items: center;justify-content: space-between;padding:0 20rpx ;">
				<input style="width: 80%;color: #FFFFFF;" v-model="objjieguo.text" class=" " type="text" @confirm="check"
					confirm-type="send" placeholder-class="my-neirong-sm" placeholder="请输入关键词~" cursor-spacing="10"
					:adjust-position="false" />
				<view style="color:#86d2ab ;width: 100rpx;" @click="objjieguo.text=''">清空</view>
			</view>
			<view style="color:#ffffff;font-size: 35rpx;font-weight: 600;margin-top: 30rpx;">图片尺寸</view>
			<view style="display: flex;">
				<view class=" viewqwe" v-for="(item,index) in chiun" :class="type ==index ? 'typsclass' : ''"
					@click="ciusd(item,index)">
					{{item}}
				</view>
			</view>
			<view style="margin-top:45rpx;margin-left: 10rpx;display: flex;justify-content:space-between">
				<button
					style="background:linear-gradient(135deg,#42e695,#3bb2b8); font-size: 30rpx;width: 720rpx;   height: 100rpx;color: #FFFFFF;line-height: 100rpx;"
					class="round cu-btn pingfang-Bold" @click="spiderMan">
					立即生成
				</button>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		webScroct,
		ws
	} from "@/common/webscroct.js"
	export default {
		data() {
			return {
				// 标题栏配置
				config: {
					title: "AI绘图",
					back: false,
					backgroundColor: '#1f232f',
					color: '#FFFFFF',
					// // #ifdef H5
					// backTabPage: '../index/person',
					// // #endif
				},
				chiun: ['256x256', '512x512', '1024x1024'],
				type: null,
				objjieguo: {
					text: '',
					cichuns: '',
				},
				Image: ''
			}
		},
		computed: {},
		onUnload() {

		},
		onLoad(e) {

		},
		mounted() {},
		methods: {
			check() {},
			ciusd(a, e) {
				this.type = e
				this.objjieguo.cichuns = a
			},
			spiderMan() {
				if (this.objjieguo.text == '') return uni.showModal({
					content: '请输入关键词'
				})
				uni.navigateTo({
					url: '/pages/information/Generated?data=' + JSON.stringify(this.objjieguo)
				})
			},
		}
	}
</script>

<style>
	page {
		background: #1c202b;
	}

	.dh-input {
		height: 90rpx;
		border-radius: 10rpx;
		padding-left: 25rpx;
		margin-top: 25rpx;
		font-size: 14px;

	}

	.viewqwe {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 200rpx;
		height: 100rpx;
		color: #FFFFFF;
		border-radius: 30rpx;
		margin-right: 30rpx;
		margin-top: 30rpx;
		text-align: center;
		border: 1rpx solid #454954
	}

	.typsclass {
		border: 1rpx solid #91c7b6
	}
</style>